window.addEventListener("load", function() {
    var focus = document.querySelector(".banner_main");
    // var ul = focus.querySelector('ul');
    // var ol = focus.querySelector("ol");

    // var picLi = ul.querySelectorAll("li");
    // for (var i = 0; i < picLi.length; i++) {
    //     //动态生成节点
    //     var btnLi = document.createElement("li");
    //     ol.appendChild(btnLi);
    // }
    // ol.children[0].classList.add("current"); //为第一个节点添加类

    var picLiX = 0; //图片计数器
    // var picLiWidth = ul.children[1].offsetWidth;
    var timer = setInterval(function() {
        if (picLiX >= picLi.length - 1) {
            picLiX = 0;
        } else {
            picLiX++;
        }
        var moveWidth = -picLiX * picLiWidth;
        // ul.style.transform = "translateX(" + moveWidth + "px)";
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = "";
        }
        ol.children[picLiX].classList.add("current");
    }, 2000);

    var touchX = 0;
    // ul.addEventListener("touchstart", function(e) {
    // clearInterval(timer);
    // touchX = e.targetTouches[0].pageX;
    // });

    var flag = false; //保证用户滑动才能切换轮播图
    var boxTouchX = 0;
    ul.addEventListener("touchmove", function(e) {
        boxTouchX = e.targetTouches[0].pageX - touchX; //当前手指位置减去手指触摸时距离
        flag = true;
    });

    ul.addEventListener("touchend", function() {
        if (flag == true) {
            // console.log(boxMoveX);
            if (Math.abs(boxTouchX) > 50) {
                if (boxTouchX > 0) {
                    picLiX--;
                } else if (boxTouchX < 0) {
                    picLiX++;
                }
                if (picLiX >= picLi.length) {
                    picLiX = 0;
                } else if (picLiX < 0) {
                    picLiX = picLi.length - 1;
                }
                var moveWidth = -picLiX * picLiWidth;
                ul.style.transform = "translateX(" + moveWidth + "px)";
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = "";
                }
                ol.children[picLiX].classList.add("current");
            }
        }
        //结束时开启定时器
        clearInterval(timer);
        timer = setInterval(function() {
            if (picLiX >= picLi.length - 1) {
                picLiX = 0;
            } else {
                picLiX++;
            }
            var moveWidth = -picLiX * picLiWidth;
            ul.style.transform = "translateX(" + moveWidth + "px)";
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = "";
            }
            ol.children[picLiX].classList.add("current");
        }, 2000);
    });
});